<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta content="webkit|ie-copm|ie-stand" name="renderer"/>
        <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"/>
        <title>梦享科技题库</title>
        <link href="__PUBLIC__/css/bootstrap.min.css" rel="stylesheet"/>
        <link href="__PUBLIC__/css/style.css" rel="stylesheet"/>
        <link href="__PUBLIC__/css/font-awesome.min.css" rel="stylesheet"/>
        <!--[if lt IE 9]>
            <link href="css/font-awesome-ie7.min.css" rel="stylesheet"/>
        <![endif]-->
        <!--[if lt IE 9]>
            <script src="js/html5shiv.js"></script>
        <![endif]-->
        <script src="__PUBLIC__/js/respond.js"></script>

    </head>
    <body>
        <div class="banner">
            <div class="wriper">
                <div class="logo"><img class="img1" src="__PUBLIC__/img/logo.png"/></div>
            </div>
        </div>
        <div class="wriper" id = "question_content" style="min-height:85.2%;">
            <div class="title2">
                <span>梦享科技题库</span>
                <span>></span>
                <span>{$name.name}</span>
                <div class="lxftime" style="float:right;color:red;" endtime="6/6/2016 9:3:5" lxfday="no"></div>
            </div>
            <div class="content1 question1">
                <h2><i class="fa fa-question-circle"></i>[选择题]</h2>
                <div class="wriper-1">
                    <form class="form1">
                        <input type="hidden"  id="input_q_id" value="">
                        <div class="question-1"></div>
                        <div class="choose">
                            <span class="icons"><i></i></span>
                            <label>
                                <input type="radio" class="inputA" name="choose" value="A" />
                                <span class="q_type_a"></span>
                            </label>
                        </div>
                     <div id="type">   
                        <div class="choose">
                            <span class="icons"><i></i></span>
                            <label>
                                <input type="radio" class="inputB" name="choose" value="B"/>
                                <span class="q_type_b"></span>
                            </label>
                        </div>
                        <div class="choose">
                            <span class="icons"><i></i></span>
                            <label>
                                <input type="radio" class="inputC"  name="choose" value="C"/>
                                <span class="q_type_c"></span>
                            </label>
                        </div>
                        <div class="choose">
                            <span class="icons"><i></i></span>
                            <label>
                                <input type="radio"  class="inputD"  name="choose" value="D"/>
                                <span class="q_type_d"></span>
                            </label>
                        </div>		
                      </div>
                        <div class="question-btn">
                            <button class="btn btn-danger" type="button" data-toggle="modal" data-target="#myModal">提前交卷</button>
                            <button class="btn btn-success" id="next_question" onclick="nextQuestion()" type="button">下一题</button>
                        </div>
                    </form>
                </div>
                <div class="answer-card">
                    <div class="answer-card-title">
                        <span>收起答题卡</span>
                        <i class="fa fa-angle-up"></i>
                    </div>
                    <ul style="height:50px;" id="question_page">
                        <for start="0" end="$count">
                         <li><a href ="##" id="li-a-hover-{$i}" onclick="showQuestion({$i})">{$i+1}</a><li>
                        </for>
                    </ul>
                </div>
            </div>
        </div>
        <!-- Button trigger modal -->

        <!-- Modal 弹出框，询问是否要提前交卷 -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">提示</h4>
                    </div>
                    <div class="modal-body" style="text-align:center;font-size:18px;">
                        <i class="fa fa-warning" style="font-size:25px;color:#FF652F;margin-right:10px;"></i>
                        <span>你尚未完成本次测评，确定要提前交卷？</span>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="foot">
            <p class="p1">梦享科技</p>
            <p><a href="http://www.miibeian.gov.cn/">© 2015-8 IDDO.</a> All rights resevered</p>
            <p><a href="http://memxiang.com">梦享科技</a>  版权所有</p>
        </div>
        <script src="__PUBLIC__/js/jquery-2.1.4.min.js"></script>
        <script src="__PUBLIC__/js/bootstrap.min.js"></script>
        <script src="__PUBLIC__/js/js.js"></script>
        <script src="__PUBLIC__/js/countdown.js"></script>
        <script  type="text/javascript">
            var questionList = {$list};
            var length = questionList.length;

            $(function() {
                //默认设置为第一题
                showQuestion(0);
                 $(".btn-primary").click(function(){
                     window.location.href = '__APP__'+"/Home/End/index.html";
                 });
            });



            /**
             * 显示题库
             * @param {type} n
             * @returns {undefined}
             */
            function showQuestion(n) {
                var question = questionList[n];
                m = n;

                console.log(question);
                if(question.q_type_e == null){
                   $('input[type=checkbox]').attr('type', 'radio');
                 //单选题
                $("#input_q_id").val(question.q_id);
                $(".question-1").html(question.q_content);
                $(".q_type_a").html(question.q_type_a);
                $(".q_type_b").html(question.q_type_b);
                $(".q_type_c").html(question.q_type_c);
                $(".q_type_d").html(question.q_type_d);
                $("#li-a-hover-"+n).addClass('answer-card-hover');
              }else{
                //多选题
               
                $("#input_q_id").val(question.q_id);
                $(".question-1").html(question.q_content);
                $(".q_type_a").html(question.q_type_a);
                $(".q_type_b").html(question.q_type_b);
                $(".q_type_c").html(question.q_type_c);
                $(".q_type_d").html(question.q_type_d);
                var ARR=['E','F','G','H','I','J','K','L','M','N'];

                if(question.q_type_e != null){
                    addType(ARR[0],question.q_type_e);
                }
               if(question.q_type_f != null){
                    addType(ARR[1],question.q_type_f);
                }
               if(question.q_type_g != null){
                    addType(ARR[2],question.q_type_g);
                }
               if(question.q_type_h != null){
                    addType(ARR[3],question.q_type_h);
                }
               if(question.q_type_i != null){
                    addType(ARR[4],question.q_type_i);
                }
               if(question.q_type_j != null){
                    addType(ARR[5],question.q_type_j);
                }
               if(question.q_type_k != null){
                    addType(ARR[6],question.q_type_k);
                }
               if(question.q_type_l != null){
                    addType(ARR[7],question.q_type_l);
                }
               if(question.q_type_m != null){
                    addType(ARR[8],question.q_type_m);
                }
              if(question.q_type_n != null){
                    addType(ARR[9],question.q_type_n);
                }
                 $('input[type=radio]').attr('type', 'checkbox');
                $("#li-a-hover-"+n).addClass('answer-card-hover');
              }
                for(var i = 0;i<length;i++){
                    if(i!==m){
                         $("#li-a-hover-"+i).removeClass('answer-card-hover')
                    }
                }
                //清除选择

                $(".choose").removeClass("choose-active");
                $("input[type=radio]").removeAttr("checked");
            }

                         /**
               * 添加选项
               * @param {type} 
               * @returns {undefined}
               */
              function addType(i,s){
                    var html =' <div class="choose">';
                      html +='<span class="icons"><i></i></span>';
                      html +='<label for="q_type'+i+'">';
                      html +='<input type="radio"  class="input"  id="q_type'+i+'" name="choose" value="'+i+'"/>';
                      html +='<span class="q_type_'+i.toLocaleLowerCase()+'">'+s+'</span>';
                      html +='</label>';
                      html +='</div>';
                   $('#type').append(html);
              }
           /**
             * 下一题
             */
            var m = 0;
            function nextQuestion(){
                //检测是否选择，如果没有先提示先选择
                var flag = 0;
                $(".choose-active").each(function(n,k){
                    if($(this).hasClass("choose-active")){
                       flag++;    
                    }
                });
                if(flag===0){
                    alert("请先选择答案");
                    return;
                }
                m++;
                answerQuestion(); //提交答案
                if(m>=length){
                   
                    //自动提交试卷中
                    window.location.href = '__APP__'+"/Home/Questions/questions2";
                    return;
                }
            }
            /**
             * 回答问题
             */            
            function answerQuestion(){
                //获取选中的值
                $(".choose-active").each(function(n,k){
                    if($(this).hasClass("choose-active")){
                      var radio = $(this).children().children("input[type=radio]");
                       $.ajax({
                           url:'__APP__'+"/Home/questions/answer",
                           dataType:'json',
                           data:{
                               "answer":radio.val(),
                               'question':$("#input_q_id").val()
                           },
                           success:function(data){
                               if(data.success==1){
                                    showQuestion(m);  
                               }else{
                                   alert("服务器错误");
                               }
                           }
                       });
                    }
                });
            }

        </script>
    </body>
</html>